import React, { Component } from 'react';
import {
	TouchableOpacity,
	TextInput,
	StyleSheet,
	View,
	Text,
	Dimensions,
} from 'react-native';
import MapView, { Marker,Callout } from 'react-native-maps';

// import HeatMap from 'react-native-heat-map';
//https://snack.expo.io
export default class Map extends Component {
	constructor(props) {
		super(props);
		this.state = {
			region: {
				latitude: 38.78825,
				longitude: -122.4324,
				latitudeDelta: 0.2,
				longitudeDelta: 0.2,
			},
			markers: [
				{
					color: "red",
					Incodent:'Disablity XX',
					Dis:'Harassment',
					coordinate: {
						"latitude": 38.78545746796351,
						"longitude": -122.44766479988456,
					},
				},
				{
					color: "red",
					Incodent:'Disablity XX',
					Dis:'Harassment2',
					coordinate: {
						"latitude": 38.78545746796361,
						"longitude": -122.4566479983456,
					},
				},
			],
		};
	}

	onRegionChange(region) {
		this.setState({ region });
	}

	render() {
		//Error check
		if (this.props.region.latitude === undefined) return <></>;

		return (
			<MapView style={styles.map} region={this.state.region}>
				{this.state.markers.map((marker, index) => {
					console.log(marker);
					return (
						<Marker
							key={index}
							
							coordinate={marker.coordinate}
							pinColor={marker.color}
							
						>
					<Callout>
                <View>
                  <Text>Rockfeller Center:</Text>
                  <Text>Incodent: {marker.Incodent}</Text>
				  <Text>Details: {marker.Dis}</Text>
                </View>
              </Callout>
						</Marker>
					);
				})}
			</MapView>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
	map: {
		width: Dimensions.get('window').width,
		// height: Dimensions.get('window').height,
		height: '70%',
	},
});

// coordinate={{latitude: marker.latitude,
// 	longitude: marker.longitude}}
